<script setup lang="ts">

import SvgIcon from "../utils/SvgIcon.vue";
import TextLine from "./textLine.vue";
import MainChart from "./mainChart.vue";
import LineRecord from "./lineRecord.vue";
import NoteList from "./noteList.vue";
import { onMounted, ref } from "vue";
import { NoteBook, SqliteDatabase } from "../../utils/database";

let bookDatabase = new SqliteDatabase('notebook')
const noteList = ref<NoteBook[]>([])

const lineList = ref([
    {
        title: '使用时长',
        icon: 'view',
        image: 'linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164))',
        number: 1000
    }, {
        title: '传输量',
        icon: 'transform',
        image: 'linear-gradient(to right bottom, rgb(134, 94, 192), rgb(81, 68, 180))',
        number: 1000
    }, {
        title: '笔记量',
        icon: 'notebook',
        image: 'linear-gradient(to right bottom, rgb(86, 205, 243), rgb(113, 157, 227))',
        number: 1000
    }
])

onMounted(async () => {
    bookDatabase = new SqliteDatabase('notebook')
    await bookDatabase.open()
    noteList.value = await bookDatabase.queryAllData() as NoteBook[]
    lineList.value[2].number = noteList.value.length
})


</script>

<template>
    <el-card>
        <el-row>
            <el-col :span="16" style="display: flex">
                <el-avatar :size="65">
                    <svg-icon name="vue" width="45px" height="45px"></svg-icon>
                </el-avatar>
                <el-space direction="vertical" style="margin-left: 8px; align-items: start">
                    <b style="font-size: 22px">今天又是元气满满的一天!</b>
                    <el-text tag="p" size="large">今天天气晴，22~30</el-text>
                </el-space>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="8" style="align-items: center; text-align: center">
                        <p style="font-size: 12px">
                            <el-text>项目数</el-text>
                        </p>
                        <b style="font-size: 18px">100</b>
                    </el-col>
                    <el-col :span="8" style="align-items: center; text-align: center">
                        <p style="font-size: 12px">
                            <el-text>项目数</el-text>
                        </p>
                        <b style="font-size: 18px">100</b>
                    </el-col>
                    <el-col :span="8" style="align-items: center; text-align: center">
                        <p style="font-size: 12px">
                            <el-text>笔记数</el-text>
                        </p>
                        <b style="font-size: 18px">{{ noteList.length }}</b>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>

    <el-card body-style="padding: 12px">
        <el-row :gutter="10">
            <el-col :span="8" v-for="line in lineList">
                <text-line :image="line.image" :title="line.title" :icon="line.icon" :number="line.number">
                </text-line>
            </el-col>
        </el-row>
    </el-card>

    <el-row :justify="'space-between'" :gutter="10">
        <el-col :span="12">
            <main-chart></main-chart>
        </el-col>
        <el-col :span="12">
            <main-chart></main-chart>
        </el-col>
    </el-row>

    <el-row :gutter="10">
        <el-col :span="16">
            <el-card body-style="padding: 10px">
                <template #header>
                    <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
                        <el-text :size="'large'">操作记录</el-text>
                        <a href="#" style="text-decoration: none">
                            <el-text type="primary">更多记录</el-text>
                        </a>
                    </div>
                </template>
                <line-record :show="true"></line-record>
                <line-record :show="true"></line-record>
                <line-record :show="true"></line-record>
                <line-record :show="true"></line-record>
                <line-record :show="true"></line-record>
                <line-record :show="false"></line-record>
            </el-card>
        </el-col>

        <el-col :span="8">
            <el-card>
                <template #header>
                    <div style="display: flex; flex-wrap: nowrap; justify-content: space-between">
                        <el-text :size="'large'">笔记列表</el-text>
                        <a href="/notebook" style="text-decoration: none">
                            <el-text type="primary">更多记录</el-text>
                        </a>
                    </div>
                </template>
                <note-list :name="note.title" :show="true" :time="note.mTime" v-for="note in noteList"></note-list>
            </el-card>
        </el-col>
    </el-row>
</template>

<style scoped>
.el-card {
    margin-bottom: 10px;
}
</style>